<template>
  <div class="designer-select-container">
    <el-card class="select-card">
      <template #header>
        <div class="card-header">
          <span>选择设计师</span>
          <div class="filter-form">
            <el-select v-model="filterForm.specialty" placeholder="设计专长" clearable>
              <el-option
                v-for="item in specialtyOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-select v-model="filterForm.experience" placeholder="工作经验" clearable>
              <el-option
                v-for="item in experienceOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-button type="primary" @click="handleSearch">筛选</el-button>
          </div>
        </div>
      </template>
      
      <div class="date-time-info">
        <el-alert
          title="设计师选择"
          type="info"
          :closable="false">
          <template #default>
            您选择的上门时间是 <strong>{{ appointmentDate }}</strong> {{ timeSlot }} 
            <el-tag size="small" type="success">{{ getAppointmentTypeName(appointmentType) }}</el-tag>
          </template>
        </el-alert>
      </div>
      
      <div v-if="loading" class="loading-container">
        <el-skeleton :rows="3" animated />
        <el-skeleton style="margin-top: 20px" :rows="3" animated />
      </div>
      
      <div v-else-if="designerList.length === 0" class="empty-container">
        <el-empty description="当前没有可选的设计师" />
      </div>
      
      <div v-else class="designer-list">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="8" v-for="designer in designerList" :key="designer.id">
            <el-card class="designer-card" :body-style="{ padding: '0px' }">
              <div class="designer-card-header">
                <el-avatar :size="60" :src="designer.avatar"></el-avatar>
                <div class="designer-basic-info">
                  <h3>{{ designer.name }} 
                    <el-tag size="small" type="success" v-if="designer.available">可预约</el-tag>
                    <el-tag size="small" type="info" v-else>已约满</el-tag>
                  </h3>
                  <div class="designer-rating">
                    <el-rate v-model="designer.rating" disabled text-color="#ff9900"></el-rate>
                    <span class="rating-text">{{ designer.rating.toFixed(1) }}</span>
                  </div>
                </div>
              </div>
              
              <div class="designer-card-content">
                <p><strong>职级:</strong> {{ designer.level }}</p>
                <p><strong>专长:</strong> {{ designer.specialty }}</p>
                <p><strong>经验:</strong> {{ designer.experience }}年</p>
                <p><strong>简介:</strong> {{ designer.description }}</p>
              </div>
              
              <div class="designer-card-footer">
                <el-button 
                  type="primary" 
                  :disabled="!designer.available"
                  @click="selectDesigner(designer)">
                  选择
                </el-button>
                <el-button @click="viewDesignerDetail(designer)">查看详情</el-button>
              </div>
            </el-card>
          </el-col>
        </el-row>
        
        <div class="pagination-container">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.currentPage"
            :page-sizes="[6, 12, 24, 48]"
            :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total">
          </el-pagination>
        </div>
      </div>
      
      <div class="back-button">
        <el-button @click="goBack">返回上一步</el-button>
      </div>
    </el-card>
    
    <!-- 设计师详情对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="设计师详情"
      width="60%">
      <div v-if="currentDesigner.id" class="designer-detail">
        <div class="designer-detail-header">
          <el-avatar :size="80" :src="currentDesigner.avatar"></el-avatar>
          <div class="designer-header-info">
            <h2>{{ currentDesigner.name }}</h2>
            <div class="designer-tags">
              <el-tag>{{ currentDesigner.level }}</el-tag>
              <el-tag type="success">{{ currentDesigner.specialty }}</el-tag>
              <el-tag type="info">{{ currentDesigner.experience }}年经验</el-tag>
            </div>
            <div class="designer-rating">
              <el-rate v-model="currentDesigner.rating" disabled text-color="#ff9900"></el-rate>
              <span class="rating-text">{{ currentDesigner.rating.toFixed(1) }} ({{ currentDesigner.commentCount }}条评价)</span>
            </div>
          </div>
        </div>
        
        <el-divider>个人介绍</el-divider>
        
        <div class="designer-bio">
          <p>{{ currentDesigner.description }}</p>
        </div>
        
        <el-divider>作品展示</el-divider>
        
        <div class="designer-works">
          <el-carousel :interval="4000" type="card" height="300px">
            <el-carousel-item v-for="(work, index) in currentDesigner.works" :key="index">
              <el-image :src="work.imageUrl" fit="cover">
                <template #error>
                  <div class="image-error">加载失败</div>
                </template>
              </el-image>
              <div class="work-info">
                <h4>{{ work.title }}</h4>
                <p>{{ work.description }}</p>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
        
        <el-divider>客户评价</el-divider>
        
        <div class="designer-comments">
          <el-timeline>
            <el-timeline-item
              v-for="(comment, index) in currentDesigner.comments"
              :key="index"
              :timestamp="comment.time"
              color="#0bbd87">
              <div class="comment-content">
                <div class="comment-header">
                  <span>{{ comment.username }}</span>
                  <el-rate v-model="comment.rating" disabled text-color="#ff9900" size="small"></el-rate>
                </div>
                <p>{{ comment.content }}</p>
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="detailDialogVisible = false">关闭</el-button>
          <el-button 
            type="primary" 
            :disabled="!currentDesigner.available"
            @click="selectCurrentDesigner">
            选择该设计师
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, onMounted, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { getDesignerList, getDesignerDetail } from '@/api/appointment'

export default {
  name: 'DesignerSelect',
  props: {
    appointmentDate: {
      type: String,
      required: true
    },
    timeSlot: {
      type: String,
      required: true
    },
    appointmentType: {
      type: String,
      required: true
    }
  },
  emits: ['select-designer', 'back'],
  setup(props, { emit }) {
    const loading = ref(true)
    const designerList = ref([])
    const currentDesigner = ref({})
    const detailDialogVisible = ref(false)
    
    // 设计师专长选项
    const specialtyOptions = [
      { value: 'casual', label: '休闲服装' },
      { value: 'formal', label: '正装/礼服' },
      { value: 'traditional', label: '传统服饰' },
      { value: 'creative', label: '创意设计' },
      { value: 'sport', label: '运动服装' }
    ]
    
    // 工作经验选项
    const experienceOptions = [
      { value: '0-3', label: '0-3年' },
      { value: '3-5', label: '3-5年' },
      { value: '5-10', label: '5-10年' },
      { value: '10+', label: '10年以上' }
    ]
    
    // 筛选表单
    const filterForm = reactive({
      specialty: '',
      experience: ''
    })
    
    // 分页信息
    const pagination = reactive({
      currentPage: 1,
      pageSize: 6,
      total: 0
    })
    
    // 获取设计师列表
    const fetchDesignerList = async () => {
      loading.value = true
      
      try {
        // 准备查询参数
        const params = {
          page: pagination.currentPage,
          pageSize: pagination.pageSize,
          specialty: filterForm.specialty,
          experience: filterForm.experience,
          date: props.appointmentDate,
          timeSlot: props.timeSlot,
          type: props.appointmentType
        }
        
        // 调用API获取设计师列表
        // 实际项目中应调用API
        // const res = await getDesignerList(params)
        
        // 模拟API响应
        setTimeout(() => {
          const mockResponse = {
            data: {
              total: 16,
              list: generateMockDesigners()
            }
          }
          
          designerList.value = mockResponse.data.list
          pagination.total = mockResponse.data.total
          loading.value = false
        }, 800)
      } catch (error) {
        ElMessage.error('获取设计师列表失败')
        loading.value = false
      }
    }
    
    // 生成模拟设计师数据
    const generateMockDesigners = () => {
      const designers = []
      for (let i = 1; i <= pagination.pageSize; i++) {
        const id = (pagination.currentPage - 1) * pagination.pageSize + i
        designers.push({
          id,
          name: `设计师${id}`,
          avatar: `https://via.placeholder.com/150?text=Designer${id}`,
          level: ['初级设计师', '中级设计师', '高级设计师', '首席设计师'][Math.floor(Math.random() * 4)],
          specialty: specialtyOptions[Math.floor(Math.random() * specialtyOptions.length)].label,
          experience: Math.floor(Math.random() * 15) + 1,
          rating: (Math.random() * 2 + 3).toFixed(1), // 评分3-5分
          description: '专注于服装设计与制作多年，擅长根据客户需求创造独特风格的服装。',
          available: Math.random() > 0.3, // 70%的概率可用
          commentCount: Math.floor(Math.random() * 100) + 10
        })
      }
      return designers
    }
    
    // 获取设计师详情
    const fetchDesignerDetail = async (id) => {
      try {
        // 实际项目中应调用API
        // const res = await getDesignerDetail(id)
        
        // 模拟API响应
        setTimeout(() => {
          // 从列表中获取基本信息
          const designer = designerList.value.find(d => d.id === id) || {}
          
          // 补充详细信息
          currentDesigner.value = {
            ...designer,
            works: [
              { 
                imageUrl: 'https://via.placeholder.com/600x400?text=Design1', 
                title: '休闲西装定制', 
                description: '根据客户身材特点量身定制的休闲西装' 
              },
              { 
                imageUrl: 'https://via.placeholder.com/600x400?text=Design2', 
                title: '中式礼服设计', 
                description: '融合传统与现代元素的中式礼服' 
              },
              { 
                imageUrl: 'https://via.placeholder.com/600x400?text=Design3', 
                title: '创意时装设计', 
                description: '独特创意的现代时装设计' 
              }
            ],
            comments: [
              { 
                username: '张先生', 
                rating: 5, 
                content: '设计师很专业，了解我的需求后给出了很好的建议，最终成品很满意！',
                time: '2023-05-15' 
              },
              { 
                username: '李女士', 
                rating: 4, 
                content: '服务态度很好，设计方案也不错，就是交付时间有点长。',
                time: '2023-04-28' 
              },
              { 
                username: '王先生', 
                rating: 5, 
                content: '非常满意这次定制体验，设计师很有耐心，成品完全符合我的期望。',
                time: '2023-03-10' 
              }
            ]
          }
        }, 300)
      } catch (error) {
        ElMessage.error('获取设计师详情失败')
      }
    }
    
    // 监听属性变化
    watch(
      [() => props.appointmentDate, () => props.timeSlot],
      () => {
        if (props.appointmentDate && props.timeSlot) {
          fetchDesignerList()
        }
      }
    )
    
    // 初始化
    onMounted(() => {
      if (props.appointmentDate && props.timeSlot) {
        fetchDesignerList()
      }
    })
    
    // 处理筛选
    const handleSearch = () => {
      pagination.currentPage = 1
      fetchDesignerList()
    }
    
    // 处理每页条数变化
    const handleSizeChange = (val) => {
      pagination.pageSize = val
      fetchDesignerList()
    }
    
    // 处理页码变化
    const handleCurrentChange = (val) => {
      pagination.currentPage = val
      fetchDesignerList()
    }
    
    // 选择设计师
    const selectDesigner = (designer) => {
      if (!designer.available) {
        ElMessage.warning('该设计师当前时段已约满，请选择其他设计师')
        return
      }
      
      emit('select-designer', designer)
    }
    
    // 查看设计师详情
    const viewDesignerDetail = (designer) => {
      fetchDesignerDetail(designer.id)
      detailDialogVisible.value = true
    }
    
    // 选择当前详情中的设计师
    const selectCurrentDesigner = () => {
      if (!currentDesigner.value.available) {
        ElMessage.warning('该设计师当前时段已约满，请选择其他设计师')
        return
      }
      
      emit('select-designer', currentDesigner.value)
      detailDialogVisible.value = false
    }
    
    // 返回上一步
    const goBack = () => {
      emit('back')
    }
    
    // 获取预约类型名称
    const getAppointmentTypeName = (type) => {
      const typeMap = {
        personal: '个人服装定制',
        enterprise: '企业团体定制',
        consultation: '咨询服务'
      }
      return typeMap[type] || type
    }
    
    return {
      loading,
      designerList,
      currentDesigner,
      detailDialogVisible,
      specialtyOptions,
      experienceOptions,
      filterForm,
      pagination,
      handleSearch,
      handleSizeChange,
      handleCurrentChange,
      selectDesigner,
      viewDesignerDetail,
      selectCurrentDesigner,
      goBack,
      getAppointmentTypeName
    }
  }
}
</script>

<style scoped>
.designer-select-container {
  padding: 10px;
}

.select-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.filter-form {
  display: flex;
  gap: 10px;
}

.date-time-info {
  margin-bottom: 20px;
}

.loading-container,
.empty-container {
  min-height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.designer-card {
  margin-bottom: 20px;
  transition: transform 0.3s;
}

.designer-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.designer-card-header {
  padding: 15px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
}

.designer-basic-info {
  margin-left: 15px;
}

.designer-basic-info h3 {
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.designer-rating {
  display: flex;
  align-items: center;
}

.rating-text {
  margin-left: 5px;
  color: #909399;
}

.designer-card-content {
  padding: 15px;
  min-height: 120px;
}

.designer-card-content p {
  margin: 5px 0;
}

.designer-card-footer {
  padding: 10px 15px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.back-button {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

/* 设计师详情样式 */
.designer-detail-header {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
}

.designer-header-info {
  margin-left: 20px;
}

.designer-header-info h2 {
  margin-top: 0;
  margin-bottom: 10px;
}

.designer-tags {
  margin-bottom: 10px;
}

.designer-tags .el-tag {
  margin-right: 5px;
}

.designer-bio {
  line-height: 1.6;
  margin-bottom: 20px;
}

.designer-works {
  margin-bottom: 20px;
}

.work-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.6);
  color: white;
  padding: 10px;
}

.work-info h4 {
  margin: 0 0 5px 0;
}

.work-info p {
  margin: 0;
  font-size: 12px;
}

.image-error {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #f5f7fa;
  color: #909399;
}

.comment-content {
  background-color: #f5f7fa;
  padding: 10px;
  border-radius: 4px;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.comment-content p {
  margin: 5px 0 0;
}

@media (max-width: 768px) {
  .card-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .filter-form {
    margin-top: 10px;
    width: 100%;
  }
  
  .designer-rating {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .designer-detail-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .designer-header-info {
    margin-left: 0;
    margin-top: 15px;
  }
}
</style> 